<!DOCTYPE html>
<html lang="en">
<head>
    <link href="ico.ico" rel="SHORTCUT ICON" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏</title>
    <style>
        .testcolor{
            background-color: rgb(151, 151, 151);
        }
        .control{
            display: none;
            width: 45px;
            height: 45px;
            /* display: block; */
        }
        
        tr>td{
            text-align: center;
        }
        .chessboard{
            position: relative;
            display: block;
            float: left;
            border: 1px solid black;
        }
        .blue{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 4px;
            transform-origin:0 0;
            z-index: 999;
            background-color: rgb(255, 72, 0);
            
        }
        .green{
            background-color: blue;
        }
        .red{
            background-color: rgb(255, 113, 220);
        }
        #gameIndex{
            clear: right;
            margin-bottom: 10px;
        }
        .title{
            float: left;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2 class="room"></h2>
    <div id="gameIndex">
        <div class="title"></div>
        <div class="title">1</div>
        <div class="title">2</div>
        <div class="title">3</div>
        <div class="title">4</div>
        <div class="title">5</div>
        <div class="title">6</div>
        <div class="title">7</div>
        <div class="title">8</div>
        <div class="title">9</div>
    </div>
    <button class="login" onclick="start(1)">新建房间</button>
    <button class="login" onclick="start(2)">加入</button>
    <input class="login roominput" type="text" placeholder="请输入房间号">
    <br class="login"/>
    <div style="width: 120px; float: left;">
        <p class="info"></p>
        <p class="dbcount"></p>
        <p class="hh"></p>
    </div>
    
    <button style="float: left;" class="control" onclick="restart()">再来一局</button>
    <div style="position: relative; float: left; clear: right;" class="control">
        <button style="position: absolute; top: 48px; left: 48px;"class="control" onclick="confirmplace()">放置挡板</button>
        <button style="position: absolute; top: 0; left: 48px;" class="control" onclick="move(1)">↑</button> 
        <button style="position: absolute; top: 96px; left: 48px;"class="control" onclick="move(2)">↓</button>
        <button style="position: absolute; top: 48px;" class="control" onclick="move(3)">←</button>
        <button style="position: absolute; top: 48px; left: 96px;" class="control" onclick="move(4)">→</button>
    
    </div>
    
    
    <!-- <button onclick="test()">测试</button> -->
    
    
</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="js/coco-message.js"></script>



<script>
    // var loc = {
    //     "host": "192.168.1.16:7443",
    //     "href": "https://192.168.1.16:7443/chess"
    // };
    var loc = location;

    for(i = 0; i < 9; i++){
        ts = document.createElement("div");
        ts.className = "title";
        ts.innerHTML = String.fromCharCode((65+i));
        document.getElementById("gameIndex").appendChild(ts);
        for(j = 0; j < 9; j++){
            k = document.createElement("div");
            k.className="chessboard " + (i * 9 + j);
            document.getElementById("gameIndex").appendChild(k);
        }
        
    }
    
    //TCP连接
    var ws = new WebSocket("wss://" + loc.host + "/pipe");

    //挡板数量
    var db_count = 10;

    //挡板变量
    var db = "";

    //挡板id
    var db_id;
    
    //挡板状态
    var db_zt;

    //0走棋1挡板
    var model = 0;

    //用户id
    var user = "";

    //自适应变量
    var min;

    //移动开关
    var move_key;

    //房间号
    var room = "";

    //我的棋子0蓝色, 1粉色
    var my_chess;
    
    

    window.onload = chessflash;
    window.onresize = chessflash;
    function chessflash(){
        min = window.innerHeight > window.innerWidth ? window.innerWidth : window.innerHeight;
        min -= 50;
        min = min / 10;
        $("#gameIndex").height(min * 10);
        $("#gameIndex").width(min * 10);
        $(".chessboard").width(min - 2);
        $(".chessboard").height(min - 2);
        $(".title").width(min - 0.01);
        $(".title").height(min - 0.01);
        if(room != ""){
            getcolor();
            getdb();
        }
    }

    function getdbcount(){
        $.ajax({
            url: loc.href + "/getdbcount",
            type: "post",
            data:{
                "room": room,
                "index": my_chess
            },
            success: function(data){
                db_count = data;
                $(".dbcount").html("你还有" + db_count + "个挡板");
            }
        });
    }
    
    function getnowmove(){
        $.ajax({
            url: loc.href + "/getnowmove",
            type: "post",
            data: {
                "room": room
            },
            success: function(data){
                move_key = (data == my_chess);
                if(move_key){
                    $(".hh").html("你的回合");
                    cocoMessage.info("你的回合", 1000);
                } else {
                    $(".hh").html("对方的回合");
                }
                
            }
        });
    }

    function start(type){

        var starturl;
        if(type == 1){
            starturl = loc.href + "/creatroom";
        } else {
            starturl = loc.href + "/join";
        }
        $.ajax({
            url: starturl,
            type: "post",
            data: {
                "room": $(".roominput").val()
            },
            success: function(data){
               
                if(data != -1){
                    if(data == 0){
                        $(".info").html("你的棋子是蓝色");
                        $(".hh").html("你的回合");
                    } else if(data == 1){
                        $(".info").html("你的棋子是粉色");
                        $(".hh").html("对方的回合");
                    }
                    my_chess = data;
                    room = $(".roominput").val();
                    $(".room").html("房间:" + room);

                    
                    getdbcount();
                    $(".login").hide();
                    $(".reset").hide();
                    $(".control").show("block");
                    $(".chessboard").click(dbcontrol);

                    getnowmove();
                    chessflash();

                    ws.send(room);
                } else {
                    cocoMessage.info("出错了!", 1000);
                }
            },
            error: function(){
                // cocoMessage.info("出错了, 正在重置", 1000);
                // $.ajax({
                //     url: "https" + url + "/chess/reset",
                //     type: "post",
                //     success: function(){
                //         cocoMessage.info("重置成功请重新登陆", 1000);
                //     }
                // });
            }
        });
    }


    function move(type){
        if(move_key){
            move_key = false;
            $.ajax({
                url: loc.href + "/move",
                type: "post",
                data: {
                    "type" : type,
                    "room" : room,
                    "mychess" : my_chess
                },
                success: function(data){
                    if(data){
                        getnowmove();
                    } else {
                        move_key = true;
                        cocoMessage.info("你不能这样走", 1000);
                    }
                    
                }
            });
        } else {
            cocoMessage.info("没到你的行动回合", 1000);
        }
    }

    function restart(){
        $.ajax({
            url: loc.href + "/restart",
            type: "post",
            data: {
                "room": room
            }
        });
    }

    
    
    

    function dbcontrol(){
        if(db_count == 0){
            cocoMessage.info("没有挡板了", 1000);
        } else {
            if(move_key){
                names = $(this).attr("class");
                id = names.substring(11);
                if(id.search(" ") != -1){
                    id = id.substring(0, id.search(" "));
                }
                rote = db_zt ? 90 : 0;
                //************
                if(db != ""){
                    db.remove();
                }
                
                if(db_id != id){
                    db_id = id;
                    dbplace(id, rote);
                } else {
                    
                    db_zt = !db_zt;
                    rote = db_zt ? 90 : 0;
                    dbplace(id, rote);
                }
                //************    
            }else{
                cocoMessage.info("没到你的行动回合", 1000);
            }
        } 
    }
    

    function dbplace(id, rote){
        db = $("<db>");
        db.attr("class", "blue");
        db.attr("style", "transform: rotate("+rote+"deg);");
        $("." + id).append(db);
        $(".blue").width(min * 2);
    }

    function confirmplace(){
        if(db != ""){
            rote = db_zt ? 90 : 0;
            move_key = false;
            $.ajax({
                url: loc.href + "/dbplace",
                type: "post",
                data: {
                    "id": db_id,
                    "rotate": rote,
                    "room": room,
                    "mychess": my_chess
                },
                success: function(data){
                    if(data){
                        $(".hh").html("对方的回合");
                        getnowmove();
                        db.remove();
                        db = "";
                        db_id = "";
                        getdbcount();
                    } else {
                        move_key = true;
                        cocoMessage.info("挡板不能放在这里", 1000);
                    }
                }
            });
        }

    }

    

    function getcolor(){
        $(".green").removeClass("green");
        $(".red").removeClass("red");
        $.ajax({
            url: loc.href + "/color",
            type: "post",
            data: {
                "room": room
            },
            success: function(data){
                for(i in data){
                    if(data[i].color == 1){
                        $("." + data[i].id).addClass("green");
                        if(data[i].id < 9){
                            cocoMessage.info("蓝棋胜!", 3000);
                        } 
                    } else if(data[i].color == 2){
                        $("." + data[i].id).addClass("red");
                        if(data[i].id >= 72){
                            cocoMessage.info("红棋胜!", 3000);
                        }
                    }
                }
            }
        });
    }
    
    function getdb(){
        
        $.ajax({
            url: loc.href + "/getdb",
            type: "post",
            data: {
                "room":room
            },
            success: function(data){
                $(".blue").remove();
                for(i in data){
                    dbplace(data[i].id, data[i].rotate);
                }
                db = "";
            }
        })
    }
    
    
    

    ws.onopen = function(){console.log("已连接...");};
    ws.onmessage = function (evt){
        if(evt.data == "restart"){
            getdbcount();
        }
        getnowmove();
        chessflash();
    };
    ws.onclose = function(){};


    function test(){
        $.ajax({
            url: loc.href + "/get",
            type: "post",
            data: {
                "room": room
            },
            success: function(data){
                for(i in data){
                    $("." + data[i]).addClass("testcolor");
                }
            }
        });
    }
</script>
</html>